<template>
  <div text-center font-sans p4 flex flex-col items-center gap-8>
    <div class="flex gap-4">
      <div class="i-logos-vue text-3xl" />
      <div class="i-logos-unocss text-3xl" />
      <div class="i-logos-postcss text-3xl" />
    </div>
    <div text-gray2 text-2xl font-medium>
      UnoCSS + Vue + PostCSS
    </div>
    <div class="bg-[url(../src/uno.svg)] bg-[url(/uno.svg)]" h-220px w-220px />
    <div class="flex gap-2 items-center">
      <button>
        Hello
      </button>
      <div class="dark">
        <a href="#">Hello</a>
      </div>
    </div>
    <div class="my-class">
      Directives in Vue SFC
    </div>
  </div>
</template>

<style>
@screen md {
  .my-class {
    @apply bg-red-800;
    color: theme('colors.red.300');
  }
}
</style>
